<template>
  <div class="list-item">
    <div class="item-box">
      <div class="item-left"><img :src="CardImg" /></div>
      <div class="item-right">
        <div class="template-box">
          <span class="item-title">{{ t('编码') }}</span>
          <span class="item-form-name">{{ props.item.code }}</span>
        </div>
        <div class="template-box">
          <span class="item-title">{{ t('名称') }}</span>
          <span class="item-form-name">{{ props.item.name }}</span>
        </div>
      </div>
      <div class="fixed-checked">
        <slot name="pick"></slot>
      </div>
      <div class="fixed-icon">
        <IconFontSymbol icon="liucheng" fill-color="#ece8ff" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import CardImg from '/@/assets/workflow/template.png';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  interface Obj {
    name: string;
    code: string;
  }
  let props = withDefaults(defineProps<{ item: Obj }>(), {
    item: () => {
      return { name: '', code: '' };
    },
  });
</script>

<style lang="less" scoped>
  @custom-color: #5332f5;
  @bg-color: #f3f0ff;

  .list-item {
    width: 31%;
    height: 92px;
    background: @bg-color;
    border-color: @custom-color;
    border-radius: 8px;
    margin: 1%;
    overflow: hidden;
    box-sizing: border-box;
    border: 3px solid transparent;

    &:hover {
      border: 3px dotted @custom-color;
    }

    .item-box {
      display: flex;
      margin: 14px;
      position: relative;
      height: 62px;
      align-items: center;

      .item-left {
        margin-right: 14px;
        min-width: 70px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .item-right {
        font-size: 14px;
        width: 100%;
        z-index: 9;

        .item-title {
          // font-weight: bold;
          color: #999999;
          flex: 1;
        }

        .item-form-name {
          width: calc(100% - 38px);
          margin-left: 4px;
          color: #999999;
          // font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .fixed-checked {
        position: absolute;
        bottom: -6px;
        z-index: 1;
        right: -6px;
      }

      .fixed-icon {
        position: absolute;
        right: -40px;
        font-size: 70px;
        transform: rotate(48deg);
        top: -40px;
        z-index: 0;
      }
    }
  }

  .template-box {
    display: flex;
    margin: 4px 0;
    width: 100%;
  }

  .img-box {
    width: 100%;
    height: 100%;
  }

  :deep(.ant-checkbox-inner) {
    border-color: @custom-color;
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    background-color: @custom-color;
  }

  :deep(.ant-checkbox-checked::after),
  :deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover),
  :deep(.ant-checkbox-inner),
  :deep(.ant-checkbox:hover),
  :deep(.ant-checkbox-input:focus + .ant-checkbox-inner) {
    border-color: @custom-color;
  }
</style>
